<template>
  <transition name="slide-left-in">
    <div class="tm-drawer-container" :style="style" v-show="visible">
      <div class="tm-drawer-close" v-show="showClose" @click="close">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="tm-drawer-resize-left"></div>
      <div class="tm-drawer-resize-right"></div>
      <slot> </slot>
    </div>
  </transition>
</template>

<script>
import Dragger from '../utils/dragger'
let idSeed = 9000
export default {
  name: 'TmDrawer',
  props: {
    width: [String, Number],
    visible: Boolean,
    showClose: {
      type: Boolean,
      default: () => true
    },
    direction: {
      type: String,
      default: () => 'left'
    },
    resize: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      id: 'tmd-' + idSeed++,
      style: {
        width: this.width ? parseInt(this.width) + 'px' : '200px'
      }
    }
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    }
  },
  mounted () {
    const resize1 = new Dragger(
      $(this.$el).find('.tm-drawer-resize-left'),
      null,
      `tm-drawer-resize-left-${this.id}`
    )
    let start_size = {}
    resize1.on('move_' + `tm-drawer-resize-left-${this.id}`, ({ move, start }) => {
      let top = start.top + move.top
      let left = start.left + move.left
      $(this.$el).css({
        width: start_size.width - move.left
      })
    })
    resize1.on('active_' + `tm-drawer-resize-left-${this.id}`, () => {
      start_size = {
        width: $(this.$el).width()
      }
      console.log('down')
    })

    const resize2 = new Dragger(
      $(this.$el).find('.tm-drawer-resize-right'),
      null,
      `tm-drawer-resize-right-${this.id}`
    )
    resize2.on('move_' + `tm-drawer-resize-right-${this.id}`, ({ move, start }) => {
      let top = start.top + move.top
      let left = start.left + move.left
      $(this.$el).css({
        width: start_size.width + move.left
      })
    })
    resize2.on('active_' + `tm-drawer-resize-right-${this.id}`, () => {
      start_size = {
        width: $(this.$el).width()
      }
      console.log('down')
    })
  }
}
</script>
